<template>
  <!-- 新增按钮 -->
  <el-main
    ><el-button type="success" plain @click="create" class="zengjia"
      >新增学生信息</el-button
    >
    <el-form>
      <!-- 模糊查询 -->
      <el-button type="primary" class="souan" @click="studentobscure"
        >搜索</el-button
      >
      <el-input v-model="mohu" placeholder="请输入内容" class="sou"></el-input>
    </el-form>
    <!-- 分页判断 -->
    <el-table
      :data="
        tableData.slice(
          (currentPage - 1) * this.pagesize,
          currentPage * this.pagesize
        )
      "
    >
    <!-- 表格 -->
      <el-table-column fixed prop="id" label="#" width="140"></el-table-column>
      <el-table-column prop="s_name" label="学生姓名" width="200">
      </el-table-column>
      <el-table-column prop="s_sex" label="学生性别" width="120">
      </el-table-column>
      <el-table-column prop="s_phone" label="学生电话" width="200">
      </el-table-column>
      <el-table-column prop="s_idcard" label="学生身份证号" width="200">
      </el-table-column>
      <el-table-column prop="s_year" label="学年制" width="120">
      </el-table-column>
      <el-table-column prop="s_number" label="学号" width="200">
      </el-table-column>
      <el-table-column prop="class_name" label="所在班级" width="200">
      </el-table-column>
      <el-table-column prop="major_name" label="专业" width="200">
      </el-table-column>
      <el-table-column prop="college_name" label="二级学院" width="200">
      </el-table-column>
      <!-- <el-table-column prop="password" label="密码">
          </el-table-column> -->
      <el-table-column prop="caozuo" label="操作" width="200">
        <template #default="scope">
          <el-button plain @click="edit(scope.row)">修改</el-button>
          <!-- ↑更改按钮 -->
          <el-button type="danger" plain @click="doDelete(scope.row.id)"
            >删除</el-button
          >
          <!-- ↑删除按钮 -->
        </template>
      </el-table-column>
    </el-table></el-main
  >
<!-- 增加表单 -->
  <el-dialog title="个人信息" v-model="dialogFormVisible">
    <el-form
      :rules="rules"
      :model="form"
      :label-position="labelPosition"
      ref="form"
      class="demo-ruleForm"
    >
      <el-form-item label="学生id" prop="s_id">
        <el-input v-model="form.s_id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学生姓名" prop="s_name">
        <el-input v-model="form.s_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学生性别" prop="s_sex">
        <el-radio v-model="form.s_sex" label="男">男</el-radio>
        <el-radio v-model="form.s_sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="学生电话" prop="s_phone">
        <el-input v-model="form.s_phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学生身份证号" prop="s_idcard">
        <el-input v-model="form.s_idcard" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学年制" prop="s_year">
        <el-input v-model="form.s_year" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="s_number">
        <el-input v-model="form.s_number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级id" prop="class_id">
        <el-input v-model="form.class_id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="专业id" prop="major_id">
        <el-input v-model="form.major_id" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="二级学院id" prop="college_id">
        <el-input v-model="form.college_id" autocomplete="off"></el-input>
      </el-form-item>
      <!-- <el-form-item label="密码" prop="password">
        <el-input v-model.number="form.password" autocomplete="off"></el-input>
      </el-form-item> -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doInsert('form')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
<!-- 修改表单 -->
  <el-dialog title="个人信息" v-model="dialogFormVisible1">
    <el-form
      :rules="rules"
      :model="form"
      :label-position="labelPosition"
      ref="form"
      class="demo-ruleForm"
    >
      <el-form-item label="姓名" prop="s_name">
        <el-input v-model="form.s_name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="s_sex">
        <el-radio v-model="form.s_sex" label="男">男</el-radio>
        <el-radio v-model="form.s_sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="联系方式" prop="s_phone">
        <el-input v-model="form.s_phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学年制" prop="s_year">
        <el-input v-model="form.s_year" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="doUpdate('form')">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页样式及其部分功能 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pagesizes"
    :page-size="pagesize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="tableData.length"
  >
  </el-pagination>
</template>

<script>
// import { defineComponent, ref } from 'vue'
import { defineComponent } from "vue";
const axios = require("axios");

export default defineComponent({
  name: "glyxsxx",
  data() {
    return {
      labelPosition: "top",//搜索框在上方
      currentPage: 1,
      pagesize:10,//10条一页
      pagesizes:[10,20,30,40],//10条、20条、30条、40条
      tableData: [],//数组
      dialogFormVisible: false, //增加的表单
      dialogFormVisible1: false, //修改的表单
      mohu: "",//模糊查询绑定值
      form: {
        id: "",
        s_id: "",
        s_name: "",
        s_sex: "",
        s_phone: "",
        s_idcard: "",
        s_year: "",
        s_number: "",
        class_id: "",
        major_id: "",
        college_id: "",
        // password: "",
      },
      //表单验证
      rules: {
        s_id: [{ required: true, message: "请输入学生账号", trigger: "blur" }],
        s_name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
        ],
        s_sex: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        s_phone: [
          { required: true, message: "请输入学生电话", trigger: "blur" },
        ],
        s_idcard: [
          { required: true, message: "请输入学生身份证号", trigger: "blur" },
        ],
        s_year: [{ required: true, message: "请输入学年制", trigger: "blur" }],
        s_number: [{ required: true, message: "请输入学号", trigger: "blur" }],
        class_id: [
          { required: true, message: "请输入班级id", trigger: "blur" },
        ],
        major_id: [
          { required: true, message: "请输入专业id", trigger: "blur" },
        ],
        college_id: [
          { required: true, message: "请输入二级学院id", trigger: "blur" },
        ],
      },
    };
  },
//生命周期
  mounted() {
    this.testGet();//显示方法
  },

  methods: {
    //分页方法
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // //分页查询
    // studentPaging() {
    //   let _this = this;
    //   axios
    //     .get("https://localhost:44386/api/manage/limitStudents", {
    //       params: {
    //         page: _this.pagesize,
    //       },
    //     })
    //     .then(function (response) {
    //       // handle success
    //       console.log(response.data);
    //       _this.tableData = response.data;
    //     });
    // },
    //

    //模糊查询方法
    studentobscure() {
      let _this = this;
      axios
        .get("https://localhost:44386/api/manage/selectstudents", {
          params: {
            s: _this.mohu,
          },
        })
        .then(function (response) {
          // handle success
          _this.tableData = response.data;
        });
    },
    //添加按钮清空添加表单值
    create() {
      this.form = {
        s_id: "",
        s_name: "",
        s_sex: "",
        s_phone: "",
        s_idcard: "",
        s_year: "",
        s_number: "",
        class_id: "",
        major_id: "",
        college_id: "",
        // password:"",
      };
      //跳出添加表单
      this.dialogFormVisible = true;
    },
    //修改按钮的方法
    edit(row) {
      this.dialogFormVisible1 = true; //修改的表单
      this.form = row;//传给表单的值
    },
    //添加表单方法
    doInsert(formName) {
      //前两行表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //局部定义_this=this
          let _this = this;
          this.form.s_id = parseInt(this.form.s_id);//强制转换为整型
          this.form.s_year = parseInt(this.form.s_year);
          this.form.class_id = parseInt(this.form.class_id);
          this.form.major_id = parseInt(this.form.major_id);
          this.form.college_id = parseInt(this.form.college_id);
          axios
            .post(
              "https://localhost:44386/api/Manage/createStudents",
              this.form
            )
            .then(function (response) {
              if (response.data >= 1) {
                _this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                });
                _this.dialogFormVisible = false;
                // debugger;
                _this.testGet();
              } else {
                _this.$notify({
                  title: "警告",
                  message: "添加异常",
                  type: "warning",
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    //修改表单方法
    doUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.form.s_year = parseInt(this.form.s_year);
          axios
            .post(
              "https://localhost:44386/api/manage/changeStudents",
              _this.form
            )
            .then(function (response) {
              if (response.data >= 1) {
                _this.$notify({
                  title: "成功",
                  message: "修改成功",
                  type: "success",
                });
                _this.dialogFormVisible1 = false;
                _this.testGet();
              } else {
                _this.$notify({
                  title: "警告",
                  message: "修改异常",
                  type: "warning",
                });
              }
            });
        } else {
          return false;
        }
      });
    },
    //查询方法
    testGet() {
      let _this = this;
      axios
        .get("https://localhost:44386/api/manage/detailStudents")
        .then(function (response) {
          // handle success
          _this.tableData = response.data;
        });
    },
    //删除方法
    doDelete(id) {
      let _this = this;
      axios
        .get("https://localhost:44386/api/manage/deleteStudents", {
          params: {
            id: id,//：前面是后端的值，后边是前端的值
          },
        })
        .then(function (response) {
          // debugger
          if (response.data >= 1) {
            _this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
            _this.testGet();
          } else {
            _this.$notify({
              title: "警告",
              message: "删除异常",
              type: "warning",
            });
          }
        });
    },
    //表单验证
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
});
</script>

<style >
.fy{
  height: 80px;
}
.souan {
  float: right;
}
.sou {
  width: 200px;
  float: right;
}
.zengjia {
  float: left;
}
header {
  /*header容器，一个template必须只能有一个容器*/
  display: flex; /*弹性布局*/
  height: 100%;
  align-items: center;
  justify-content: space-between; /*不用float浮动布局，采用两边布局*/
}
.l-content {
  /*左边的菜单拉伸按钮*/
  display: flex;
  align-items: center;
}
.l-content .el-button {
  /*面包屑跟 菜单按钮的间距*/
  margin-right: 20px;
}

.r-content .user {
  /*设置图片的大小，以及圆滑度*/
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #fff;
}
.tac {
  text-align: center;
}
.el-menu-vertical-demo {
  width: 200px;
}
.el-container {
  height: 738px;
}
body {
  margin: 0;
  padding: 0;
}
.el-header,
.el-footer {
  background-color: #333333;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: var(--el-text-color-primary);
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>